// backbone Model and Collection test
var data = {
	jobCatList :[
		{
	    	id : "cat1",
	    	name : "扶老奶奶",
	    	jobList:[
		    	{id:"1",name:"内地6月份CPI涨2.2%"},
		    	{id:"2",name:"创29个月新低"},
		    	{id:"11",name:"内地613月份CPI涨2213.21%"},
		    	{id:"22",name:"创219个月新低"}
		    ]
	    },
		{
	    	id : "cat2",
	    	name : "过大马路",
	    	jobList:[
		    	{id:"3",name:"内地将加大计划生育家庭养老扶助力度"},
		    	{id:"4",name:"北海舰队航空兵原政委白文奇升任北海舰队政委"}
		    ]
	    },
		{
	    	id : "cat3",
	    	name : "被车撞了",
	    	jobList:[
		    	{id:"5",name:"社科院：非洲国家对中国援助期望值提高 远超中国国力"},
		    	{id:"6",name:"港人到日领馆抗议“钓鱼岛国有化论”"}
		    ]
	    }
	]
};
var App ={
	Job:{},
	Fight:{}
};

$(function(){
	//任务数据模型
    App.Job.JobModel = MVC.Model.extend({
    	defaults:{
    		id:"",
    		name:""
    	},
		initialize : function(args){
			VCM.debug("JobModel initialize",args, this);
		},
		doJob : function(){
			VCM.debug("JobModel dojob",this.get("id"));
		}
    });
    
    //job collection
    App.Job.JobList = MVC.Collection.extend({
    	model : App.Job.JobModel,
    	initialize: function(args){
    		VCM.debug("JobList initialize", args, this );
        }
    });

    //job catalog model
    App.Job.JobCatModel = MVC.Model.extend({
    	defaults:{
    		id:"",
    		name:"",
    		jobList:null
    	},
		initialize : function(args){
			VCM.debug("JobCatModel initialize", args, this );
			 _.isArray(args.jobList) && this.set("jobList" , new App.Job.JobList(args.jobList) );
		}
    });
    
    //job catalog collection
    App.Job.JobCatList = MVC.Collection.extend({
    	model : App.Job.JobCatModel,
    	initialize: function(args){
    		VCM.debug("JobCatList initialize", args, this );
        }
    });

	//初始化集合赋值
	var jobCatList = new App.Job.JobCatList(data.jobCatList);
    
    VCM.debug("jobCatList",jobCatList,jobCatList.models[0].get("jobList").models[0]);
    
	//任务视图
   	App.Job.JobView = MVC.View.extend({
   		//下面这个标签的作用是，把template模板中获取到的html代码放到这标签中。
   		tagName: "li",
   		className: "job_block",
   		id:"",
   		//当模板渲染完成会放入这个el中,el将会根据 tabName和className进行创建
   		//el:"job_list",
   		
   		// 获取一个任务条目的模板
    	template: _.template($("#tpl_job").html()),
	    events:{
	      "click a.do_job" : "doJob"
	    },
	    initialize: function(args){
    		VCM.debug("JobView initialize", args );
    		this.render();
	    },
		render: function() {
			this.$el.html( this.template(this.model.toJSON()) ).attr("id",this.model.get("id"));
			return this;
		},
		doJob : function(event){
			VCM.debug("JobView doJob", this, event);
			this.model.doJob();
		}
		
   	});
   	
//   	jobView = new App.Job.JobView({
//   		model : jobCatList.models[0].get("jobList").models[0]
//   	});
   	//$(".job_list").append(jobView.render().$el.html());
   	//VCM.debug(jobView.render().$el.html());
   	
   	App.Job.JobListView = MVC.View.extend({
   		tagName: "ul",
   		className: "job_list scroller_container",
	    initialize: function(args){
    		VCM.debug("JobListView initialize", args);
    		$("#app").append(this.render().el);
	    },
   		render: function() {
   			VCM.debug("JobListView rander",this,this.$el);
   			var that = this,
   				_list = this.model,
   				_jobView = null;
   			_list.each(function(job){
   				_jobView = new App.Job.JobView({model: job});
   				that.$el.append(_jobView.el);
   			});
   			VCM.debug("JobListView rander",this.el);
			return this;
		}
   	});
   	
   	jobListView = new App.Job.JobListView({model:jobCatList.models[0].get("jobList")});
});

